<template>
  <div>
     <header>
           <div class="div">
<!--             <img src="../../../assets/返回.png" @click="back()" alt="">-->
<!--             <span class="solid" @click="back()">返回</span>-->
           </div>
           <div class="div">
             <span>消息</span>
           </div>
           <div class="div">
             <span class="solid"></span>
           </div>
     </header>
    <div class="newsList" @click="runSys()" >
      <img src="../../../assets/系统消息.png" alt="">
      <ul>
        <li style="font-size: 15px">
          <span class="name">系统消息</span>
          <span class="time" v-if="xitong && xitong.time">{{xitong.time}}</span>
<!--          <span class="time"-->
<!--                v-if="data && item.time !== '' && data[0][item.time] !== null && data[0][item.time] !== ''"-->
<!--          >-->
<!--            {{data[0][item.time]}}-->
<!--          </span>-->
<!--          <span v-else></span>-->
        </li>
        <li style="font-size: 13px">
          <span class="text" v-if="xitong.count && xitong.count > 0">
            您有{{xitong.count}}条未读消息
          </span>
          <span class="text" v-else>暂无新的系统消息</span>
          <van-badge v-if="xitong.count && xitong.count > 0" :content="xitong.count" max="99" />
        </li>
      </ul>
    </div>
    <div class="newsList" @click="runChat()" >
      <img src="../../../assets/聊天信息.png" alt="">
      <ul>
        <li style="font-size: 15px">
          <span class="name">聊天信息</span>
          <span class="time"></span>
        </li>
        <li style="font-size: 13px">
<!--          <span class="text" >-->
<!--          </span>-->
          <span class="text" >暂无新的聊天信息</span>
<!--          <van-badge   max="99" />-->
        </li>
      </ul>
    </div>
    <div class="newsList" @click="runOrder()">
      <img src="../../../assets/订单信息.png" alt="">
      <ul>
        <li style="font-size: 15px">
          <span class="name">订单信息</span>
          <span class="time"></span>
        </li>
        <li style="font-size: 13px">
<!--          <span class="text" >-->
<!--          </span>-->
          <span class="text" >暂无新的订单信息</span>
<!--          <van-badge   max="99" />-->
        </li>
      </ul>
    </div>
    <div class="newsList"  @click="runService()">
      <img src="../../../assets/服务信息.png" alt="">
      <ul>
        <li style="font-size: 15px">
          <span class="name">服务消息</span>
          <span class="time" v-if="fuwu && fuwu.time">{{fuwu.time}}</span>
        </li>
        <li style="font-size: 13px">
          <span class="text" v-if="fuwu && fuwu.count && fuwu.count > 0">
            {{fuwu.name}}发布了新的服务包！
          </span>
          <span class="text" v-else>暂无新的服务消息</span>
          <van-badge v-if="fuwu && fuwu.count && fuwu.count > 0" :content="fuwu.count" max="99" />
        </li>
      </ul>
    </div>
    <div>
      <list-menu></list-menu>
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import listMenu from '../../../components/Vue/ListMenu'
export default {
  name: 'News',
  components: {'listMenu': listMenu},
  data () {
    return {
      // list: [
      //   {
      //     name: '系统消息',
      //     imgUrl: require('../../../assets/系统消息.png'),
      //     time: 'xitong.time',
      //     news: 'count',
      //     pushUrl: '/systemList'
      //   },
      //   {
      //     name: '聊天信息',
      //     imgUrl: require('../../../assets/聊天信息.png'),
      //     time: '',
      //     news: '',
      //     pushUrl: '/'
      //   },
      //   {
      //     name: '订单信息',
      //     imgUrl: require('../../../assets/订单信息.png'),
      //     time: '',
      //     news: '',
      //     pushUrl: '/allOrder'
      //   },
      //   {
      //     name: '服务消息',
      //     imgUrl: require('../../../assets/服务信息.png'),
      //     time: '',
      //     news: '',
      //     pushUrl: '#'
      //   }
      // ],
      // data: '',
      xitong: '',
      fuwu: '',
      userid: sessionStorage.getItem('userid')
    }
  },
  computed: {
    role () {
      return Number(sessionStorage.getItem('role'))
    }
  },
  mounted () {
    sessionStorage.removeItem('allOrderActive')
    this.getNews()
  },
  methods: {
    formatDate (date) {
      const mistiming = Math.round((Date.now() - new Date(date).getTime()) / 1000)
      const tags = ['年', '个月', '星期', '天', '小时', '分钟', '秒']
      const times = [31536000, 2592000, 604800, 86400, 3600, 60, 1]
      for (let i = 0; i < times.length; i++) {
        const inm = Math.floor(mistiming / times[i])
        console.log(inm)
        if (tags[i] === '天') {
          switch (inm) {
            case 0:
              return '今天'
              break
            case 1:
              return '昨天'
              break
            case 2:
              return '前天'
              break
            default:
              return inm + tags[i] + '前'
              break
          }
        }
        if (inm !== 0) {
          return inm + tags[i] + '前'
        }
      }
    },
    getNews () {
      // findMsgList
      this.$http.findMsgList({})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.xitong = res.data.data.xitong
            this.fuwu = res.data.data.fuwu
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 聊天
    runChat () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        // 我的消息列表 myMessageInfo
        window.WebViewJavascriptBridge.callHandler('myMessageInfo', '', function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    // 系统消息
    runSys () {
      this.$router.push({path: '/systemList'})
    },
    // 订单信息
    runOrder () {
      if (this.role == 1) {
        this.$router.push({path: '/PatientAllOrder', query: {userid: this.userid}})
      } else if (this.role == 2) {
        this.$router.push({path: '/DoctorAllOrder', query: {userid: this.userid}})
      }
    },
    runService () {
      this.$router.push({path: '/serviceMessageList'})
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  header{
     width: 100%;
     height: 44px;
     display: flex;
     align-items: center;
     border-bottom: 1px solid #E5E5E5;
     background: white;
     position: sticky;
     top: 0;
     z-index: 9;
   }
  .div{
   width: 33%;
   height: 100%;
   display: flex;
   align-items: center;
   font-family: "PingFang SC";
   font-size: 15px;
   font-weight: bold;
  }
  .div img{
   margin-right: 5px;
  }
  .div:nth-child(1) img{
   height: 13px;
   width: 7px;
   margin-left: 15px;
  }
  .div:nth-child(3) img{
   margin-right: 5px;
  }
  .div:nth-child(3) span{
   margin-right: 15px;
  }
  .div:nth-child(2){
   justify-content: center;
  }
  .div:nth-child(3){
   justify-content: flex-end;
  }
  .solid{
   color: #1DA4F2;
  }
  .newsList{
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 0 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E5E5;
  }
  .newsList img{
    width: 45px;
    height: 45px;
  }
  .newsList ul{
    width: 80%;
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .newsList ul li{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 8px;
  }
  .name{
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .time{
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    font-size: 13px;
  }
  .text{
    font-family: PingFang SC;
    font-weight: 500;
    color: #666;
  }
</style>
